<template>
  <div style="height: 100%">
    <el-container style="height: 100%;">

      <el-header style="background: #c2d4d4;height: 90px;width: 100%;position: fixed;z-index: 10" :style="backgroundHeader">
        <myheader></myheader>
      </el-header>


        <el-container :style="backgroundHeadertow" style="margin-top: 90px">
          <div style="width: 100%;height: 100%;">
            <el-header >
              <div class="top" >
                <el-menu
                    default-active="1"
                    background-color="transparent"
                    :router="true">
                    <span  v-for="(tiem,leftListindex) of leftList" :key="leftListindex" >
                       <el-menu-item
                           :index="leftList[leftListindex].myrouter" style="display: inline">
                      <i :class="tiem.icfon"></i>
                      <span slot="title"  >
                        {{ tiem.name }}
                      </span>
                    </el-menu-item>
                    </span>

                </el-menu>
              </div>
            </el-header>

            <el-main style="width: 1300px;margin: 0 auto;padding: 0;height: 100%;">
              <div>
                <div class="right" style="width: 100%;">
                  <router-view></router-view>
                </div>
              </div>
            </el-main>

          </div>

      </el-container>
      <el-footer style="z-index: 10;padding: 0;">
     <myfooter/>
      </el-footer>
    </el-container>
  </div>
</template>


<script>
import myheader from "@/page/myheader";
import myfooter from "@/page/myfooter";

export default {
  name: "index",
  data() {
    return {
      active: 0,
      backgroundDiv: {
        backgroundImage: 'url(' + require('../img/ang.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      backgroundHeader: {
        backgroundImage: 'url(' + require('../img/a1.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      backgroundHeadertow: {
        backgroundImage: 'url(' + require('../img/tow.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      tabPosition: 'left',
      leftList: [
        {
          icfon: 'el-icon-search',
          myrouter: 'discovermusic',
          name: '发现音乐'
        },
        {
          icfon: 'el-icon-s-fold',
          myrouter: 'myryanking',
          name: '排行榜'
        },
        {
          icfon: 'el-icon-tickets',
          myrouter: 'songsheet',
          name: '歌单',
        },
        {
          icfon: 'el-icon-menu',
          myrouter: 'singer',
          name: '分类',
        },
        {
          icfon: 'el-icon-upload2',
          myrouter: 'uploadmusic',
          name: '上传音乐'
        },
        {
          icfon: 'el-icon-star-off',
          myrouter: 'lovemusic',
          name: '我喜欢的音乐'
        },
        {
          icfon: 'el-icon-setting',
          myrouter: 'management',
          name: '个人信息'
        },
      ]
    };

  },
  methods: {
    clicks(path) {
      this.$router.push(path)
    }
  },
  components: {
    myheader,
    myfooter
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>